<template>
<div class="wrapper">
	<swiper :options="swiperOption">
    	<swiper-slide v-for="item of swiperList" :key="item.id">
    	<img class="swiper-img" :src="item.imgUrl" />
    	</swiper-slide>
    	<div class="swiper-pagination"  slot="pagination"></div>
  	</swiper>
  	</div>
</template>

<script>
export default{
	name:'HomeSwiper',
	data (){
		return {
			swiperOption:{
				pagination:'.swiper-pagination',
				loop:true
			},
			swiperList:[{
				id:'0001',
				imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/78/0a6355bcbbf89502.jpg_750x200_fc738633.jpg'
			},{
				id:'0002',
				imgUrl:'http://img1.qunarzz.com/piao/fusion/1809/b4/7101381b7b2c0702.jpg_750x200_b8da41bf.jpg'
			},{
				id:'0003',
				imgUrl:'http://img1.qunarzz.com/piao/fusion/1807/66/e5a5cec881702f02.jpg_750x200_67bb5691.jpg'
			}]
		}
	}
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
		background-color:#fff !important
.wrapper
	width: 100%
	height: 0
	overflow: hidden
	padding-bottom: 26.25%
	background-color: #eee
	.swiper-img
		width:100%
</style>